import 'styles/nprogress.scss'
import 'styles/github-markdown.scss'
import 'styles/globals.scss'
// import 'highlight.js/scss/vs.scss'
import 'highlight.js/scss/base16/github.scss'
import type { AppProps } from 'next/app'
import NProgress from "nprogress"
import Router from "next/router"
import { ReactElement, ReactNode } from 'react'
import { NextPage } from 'next'

NProgress.configure({ showSpinner: false })

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page)
  return getLayout(<Component {...pageProps} />)
}

Router.events.on('routeChangeStart', () => NProgress.start())
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => NProgress.done())

export default MyApp
